<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

const route = useRouter();
const groupId = ref(route.currentRoute.value.query.groupId as number);

const messaglist = reactive({});
const url = 'http://localhost:8080/'

// 监听路由的变化，更新 groupId 的值
watch(
    () => route.currentRoute.value.query.groupId,
    (newValue) => {
      groupId.value = newValue as number;
      getmessaglist();
    }
);
function getmessaglist(){
  axios.get(url + 'messages/getmsg?id='+ groupId.value)
      .then(response => {
        for (const key in messaglist) {
          delete messaglist[key];
        }
        Object.assign(messaglist, response.data);
        console.log(messaglist)
        // 在这里处理返回的数据，例如更新页面上的内容等
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
}
getmessaglist()
function id() {
  console.log("groupId: ", groupId.value);
}

id();
</script>

<template>


  <div>
    <el-scrollbar max-height="850px">
      <div @click="messageVisable = true" v-for="message in messaglist" :key="message.messageid" class="hover:bg-discord-hover m-2 bg-discord-100 h-[120px] rounded-md flex justify-between p-4">
        <div class="">
          <div class="text-discord-50 max-w-[300px] font-bold truncate">{{message.title}}</div>
          <div class="text-discord-logo max-w-[400px] max-h-[40px] truncate text-sm">{{message.messagetext}}</div>

        </div>
        <div>
          <img src="../assets/pic/yw.jpg" class="w-[90px] h-[90px] rounded">
        </div>
      </div>
    </el-scrollbar>

  </div>

</template>

